<template>
  <div class="app-container">
    <el-form ref="queryForm" :inline="true">
      <el-form-item>
        <el-button type="primary" @click="getPageList">刷新</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          v-hasPermi="['/v1/rbac/menu/create']"
          >新增</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="pageList"
      row-key="menuId"
      height="729px"
      stripe
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- <el-table-column
        prop="sequence"
        label="序号"
        width="60"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="menuName"
        label="菜单名称"
        width="360"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="path"
        label="组件路径"
        show-overflow-tooltip
        header-align="center"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="sequence"
        label="排序"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column prop="typ" label="类型" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.typ == 0"> 菜单 </el-tag>
          <el-tag type="success" v-if="scope.row.typ == 1"> 目录 </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 0"> 启用 </el-tag>
          <el-tag type="danger" v-if="scope.row.status == 1"> 禁用 </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="left"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['/v1/rbac/menu/update']"
            >修改</el-button
          >
          <el-button
            v-if="scope.row.typ == 1"
            type="text"
            @click="handleAdd(scope.row)"
            v-hasPermi="['/v1/rbac/menu/create']"
            >新增菜单</el-button
          >
          <el-button
            v-if="scope.row.typ == 0"
            type="text"
            @click="handleBind(scope.row)"
            v-hasPermi="['/v1/rbac/menu/actions/add']"
            >绑定功能</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['/v1/rbac/menu/delete']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="title"
      center
      :visible.sync="open"
      width="800px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parentId">
              <treeselect
                v-model="form.parentId"
                :options="menuOptions"
                :normalizer="
                  (node) => {
                    if (node.children && !node.children.length) {
                      delete node.children;
                    }
                    return {
                      id: node.menuId,
                      label: node.menuName,
                      children: node.children,
                    };
                  }
                "
                :show-count="true"
                placeholder="选择上级菜单"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型" prop="typ">
              <el-radio-group v-model="form.typ">
                <el-radio :label="0">菜单</el-radio>
                <el-radio :label="1">分组</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" clearable placeholder="填写名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="路由地址" prop="path">
              <el-input
                v-model="form.path"
                clearable
                placeholder="填写路由地址"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col v-if="form.typ == 1" :span="24">
            <el-form-item label="接口地址" prop="path">
              <el-input
                v-model="form.path"
                clearable
                placeholder="填写接口地址"
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="排序" prop="sequence">
              <el-input-number
                v-model="form.sequence"
                clearable
                :min="1"
                placeholder="填写序号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="0">启用</el-radio>
                <el-radio :label="1">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="memo">
              <el-input
                v-model="form.memo"
                clearable
                type="textarea"
                placeholder="填写备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="btnLoading" @click="submitForm">
          确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <BindActions ref="bindActions" @getList="getPageList"></BindActions>
  </div>
</template>

<script>
import { getMenuTree, createMenu, updateMenu, deleteMenu } from "@/api/menu";

import { cloneDeep } from "lodash-es";

import { arrayToTree } from "@/utils";

import BindActions from "./bindActions.vue";

export default {
  name: "Menuset",
  components: { BindActions },
  data() {
    return {
      pageList: [],
      title: "新增",
      open: false,
      form: {},
      rules: {
        parentId: { required: true, message: "请选择", trigger: "change" },
        typ: { required: true, message: "请选择", trigger: "change" },
        name: { required: true, message: "请填写", trigger: "blur" },
        path: { required: true, message: "请填写", trigger: "blur" },
        sequence: { required: true, message: "请填写", trigger: "change" },
      },
      loading: false,
      btnLoading: false,
      menuOptions: [
        {
          menuId: 0,
          menuName: "顶级菜单",
          children: [],
        },
      ],
    };
  },
  mounted() {
    this.getPageList();
  },
  methods: {
    handleDelete(row) {
      this.$confirm("确定要删除此菜单吗？", "提示", { type: "warning" }).then(
        () => {
          deleteMenu({ menuId: row.menuId }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.getPageList();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        }
      );
    },
    handleAdd(row) {
      this.title = "新增";
      if (row) {
        this.$set(this.form, "parentId", row.menuId);
      }
      this.$set(this.form, "status", 0);
      this.$set(this.form, "typ", 0);
      this.open = true;
    },
    handleBind(row) {
      this.$refs.bindActions.init(row);
    },
    handleUpdate(row) {
      this.title = "编辑";
      this.form = { ...row, name: row.menuName };
      this.open = true;
    },
    cancel() {
      this.form = {};
      this.$refs.form.resetFields();
      this.open = false;
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading = true;

          let params = cloneDeep(this.form);

          if (params.menuId) {
            // 编辑
            updateMenu(params)
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功",
                  });
                  this.cancel();
                  this.getPageList();
                } else {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  });
                }
              })
              .finally(() => (this.btnLoading = false));
          } else {
            // 新增
            createMenu(params)
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "操作成功",
                  });
                  this.cancel();
                  this.getPageList();
                } else {
                  this.$message({
                    type: "error",
                    message: res.msg,
                  });
                }
              })
              .finally(() => (this.btnLoading = false));
          }
        }
      });
    },
    getPageList() {
      this.loading = true;
      getMenuTree()
        .then((res) => {
          this.pageList = arrayToTree(res.data.items || []);
          this.menuOptions[0]["children"] = this.pageList;
        })
        .finally(() => (this.loading = false));
    },
  },
};
</script>

<style></style>
